<template>
  <article>
    <nuxt-content
      class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto"
      :document="article"
    />
    <!-- <pre> {{ article }} </pre> -->
    <!-- <p>Article last updated: {{ formatDate(article.updatedAt) }}</p>
 <p>{{ article.description }}</p>
 <div class="p-4 mb-4 text-white bg-blue-500">
  This is HTML inside markdown that has a class of note
</div> -->
  </article>
</template>

<script>
import 'prismjs';

export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.article).fetch();
    return { article };
  },
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(date).toLocaleDateString('en', options);
    },
    hlCode(msg) {
      // 替换pre标签，前端高亮显示
      let content = msg;
      const c = document.createElement('div');
      c.innerHTML = content;
      for (let i = 0; i < c.getElementsByTagName('pre').length; i++) {
        // c.getElementsByTagName('pre')[i].setAttribute("class", "language-java");
        const con = c.getElementsByTagName('pre')[i].innerHTML;
        c.getElementsByTagName('pre')[
          i
        ].innerHTML = `<code class = "language-java">${con}</code>`;
      }
      content = c.innerHTML;
      this.articleData.html_context = content;
      return content;
    },
  },
  mounted() {
    // process.browser
    //   && document
    //     .querySelectorAll('pre code')
    //     .forEach(block => Prism.highlightElement(block));
    // 前端渲染，代码高亮插件
    // this.hlCode(this.articleData.html_context);
    // Prism.highlightAll();
  },
};
</script>
